<template>
	<view class="draw-lots-main" v-if="goods.type==8">
		<view class="draw-lots">
			<view class="draw-lots-left">
				<view class="title">
					报名列表/抽签结果
					<block v-if="goods.status==0||goods.status==2">
						<text class="info">{{goods.status==0?'待公布':'已结束'}}</text>
					</block>
					<block v-if="goods.status==3">
					<text class="warning">已公布</text>
					</block>
				</view>
				<view class="des">
					已有
					<text>{{goods.draw_all_count||0}}</text>
					用户参与报名
					<block v-if="goods.status==3">
					<text>已中签{{goods.draw_count||0}}人</text>
					</block>
				</view>
			</view>
			<view class="draw-lots-right">
				<u-button @click="more">查看详情</u-button>
			</view>
		</view>
		<u-popup bgColor="transparent" round="32rpx" :show="show" @close="close">
		    <view class="draw-lots-main-popup">
		        <view class="header">
					<view class="header-left">
						<view class="header-left-title">
							报名列表
						</view>
						<view class="header-left-win">
							<block v-if="goods.status==3||goods.status==2">
								已中签{{goods.draw_count||0}}人
							</block>
							<block v-if="goods.status==0">
								待公布
							</block>
						</view>
						<view class="header-left-des">
							已有
							<text>{{goods.draw_all_count||0}}</text>
							用户参与报名
						</view>
					</view>
					<view class="header-right">
						<u-icon @click="close" name="close" color="#333333" size="22"></u-icon>
						<view class="header-right-btns">
							<u-subsection 
							activeColor="#333333"
							inactiveColor="#C1C1C1"
							:list="list" 
							:current="current"
							 @change="sectionChange"></u-subsection>
						</view>
					</view>
				</view>
				<scroll-view scroll-y class="draw-lots-list" @scrolltolower="Drawlist(url)">
					<block v-for="(item,index) in drawLotsList" :key="index">
					<view class="draw-lots-list-item">
						<view class="draw-lots-list-item-left">
							<view class="name">{{item.nickname}}</view>
							<view class="time">{{item.create_time}}</view>
						</view>
						<view class="draw-lots-list-item-right">
						{{goods.status==0?'未公布':item.is_drawing==0?'未中签':'已中签'}}
						</view>
					</view>
					</block>
				</scroll-view>
		    </view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		props:{
			goods:{
				type:Object,
				default:()=>{
					return {}
				}
			}
		},
		data() {
			return {
				show:false,
				list:[
					'报名列表',
					'中签列表'
				],
				current:0,
				page:1,
				size:10,
				drawLotsList:[]
			};
		},
		methods:{
			more(){
				this.show = true
				this.page = 1
				this.drawLotsList=[]
				this.Drawlist(this.$api.Drawlist)
			},
			close(){
				this.show = false
			},
			sectionChange(index) {
				this.current = index;
				this.page = 1
				this.drawLotsList=[]
				if(index==0){
					this.url = this.$api.Drawlist
				}else{
					this.url = this.$api.isDrawlist
				}
				this.Drawlist(this.url)
			},
			//抽签列表
			async Drawlist(url){
				let res = await this.$http({
					url:url,
					method: 'GET',
					hideLoading: true,
					needToken:true,
					data:{
						page:this.page,
						page_size:this.size,
						id:this.goods.id
					}
				})
				if(res.code==200){
					if(this.drawLotsList.length<res.data.list.total){
						if(this.page==1){
							this.drawLotsList = res.data.list.data
						}else{
							this.drawLotsList = this.drawLotsList.concat(res.data.list.data)
						}
						this.page = this.page+1
					}
					
				}
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.draw-lots-main{
		margin: 18rpx 28rpx 0 28rpx;
		.draw-lots{
			padding: 36rpx 32rpx 40rpx 36rpx;
			background: #2C2C2D;
			border-radius: 24rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			&-left{
				.title{
					font-size: 28rpx;
					font-weight: 600;
					color: #FFFFFF;
					line-height: 40rpx;
					text{
						font-size: 20rpx;
						font-weight: 600;
						border-radius: 4rpx;
						display: inline-block;
						padding: 0 8rpx;
						margin-left: 10rpx;
						&.info{
							background: #767676;
							color: #FFFFFF;
						}
						&.warning{
							background-color: #F2E0BC;
							color: #4E422C;
						}
					}
				}
				.des{
					font-size: 24rpx;
					font-weight: 400;
					color: #A0A0A0;
					line-height: 34rpx;
					margin-top: 10rpx;
					text{
						color: #FFFFFF;
					}
				}
			}
			&-right{
				::v-deep button{
					width: 178rpx;
					height: 62rpx;
					border-radius: 8rpx;
					border: 2rpx solid #F2E0BC;
					font-size: 24rpx;
					font-weight: 600;
					color: #F2E0BC;
					background-color: transparent;
				}
			}
		}
		&-popup{
			background: #1E2020;
			border-radius: 32rpx 32rpx 0 0;
			padding: 46rpx 24rpx;
			.header{
				display: flex;
				align-items: center;
				justify-content: space-between;
				&-left{
					&-title{
						font-size: 32rpx;
						font-weight: 600;
						color: #FFFFFF;
						line-height: 44rpx;
					}
					&-win{
						font-size: 24rpx;
						font-weight: 600;
						color: #FFFFFF;
						line-height: 34rpx;
						margin-top: 18rpx;
					}
					&-des{
						font-size: 24rpx;
						font-weight: 400;
						color: #A0A0A0;
						line-height: 34rpx;
						text{
							color: #FFFFFF;
						}
					}
				}
				&-right{
					display: flex;
					flex-direction: column;
					align-items: flex-end;
					&-btns{
						margin-top: 48rpx;
						::v-deep .u-subsection--button{
							background: #454545!important;
							padding: 0;
							.u-subsection--button__bar{
								background-color: #F2E0BC;
							}
							.u-subsection__item{
								padding: 12rpx 34rpx;
							}
						}
					}
				}
			}
			.draw-lots-list{
				height: 50vh;
				margin-top: 24rpx;
				&-item{
					padding: 22rpx 0;
					border-bottom: 1px solid #333333;
					display: flex;
					align-items: center;
					justify-content: space-between;
					&-left{
						.name{
							font-size: 28rpx;
							font-weight: 600;
							color: #FFFFFF;
							line-height: 40rpx;
						}
						.time{
							font-size: 24rpx;
							font-weight: 600;
							color: #C1C1C1;
							line-height: 34rpx;
							margin-top: 4rpx;
						}
					}
					&-right{
						font-size: 24rpx;
						font-weight: 600;
						color: #FFFFFF;
						line-height: 34rpx;
					}
				}
			}
		}
	}
	
</style>
